<template>
    <div class="share-collext-speak">
        <!--<span class="scs-bowser-person">-->
            <!--{{shareMsg.visitNum > 10000 ? parseInt(shareMsg.visitNum /1000) / 10 +"万" : shareMsg.visitNum}}人浏览-->
        <!--</span>-->
        <div class="pen-wicon" @click="commentShow">
            <img v-if="shareMsg.penType == 1" class="pen-icon" src="../../../assets/images/commonActModel/pen_icon.png" alt="">
            <img v-else-if="shareMsg.penType == 2" class="pen-icon" src="../../../assets/images/user/user_pen_icon.png" alt="">
            <span>{{shareMsg.inputText}}</span>
        </div>
        <span>
            <span class="scs-praise scs-wicon flexCenter displayFlex">
                <span class="scs-icon-box">
                    <img @click.prevent="isWrapLike(true)" class="scs-icon" v-if="!hadLiked" :src="staticImageUrl('/images/look/love_collection.png')" alt="">
                    <img @click.prevent="isWrapLike(false)" class="scs-icon" v-else :src="staticImageUrl('/images/look/love_collection_active.png')" alt="">
                    <span class="share-num-wrap" v-if="shareMsg.likeNum">{{likeNum > 9999 ? '1w+' : likeNum}}</span>
                </span>
            </span>
            <span class="scs-comment scs-wicon" @click="commentShow">
                <span class="scs-icon-box">
                    <img  class="scs-icon disabled" :src="staticImageUrl('/images/look/comment.png')" alt="">
                    <span class="share-num-wrap" v-if="commentedNum">{{commentedNum  > 9999 ? '1w+' : commentedNum}}</span>
                </span>
            </span>
            <span class="scs-share scs-wicon" @click="showShare">
                <span class="scs-icon-box">
                    <img class="scs-icon disabled" :src="staticImageUrl('/images/look/icon_share.png')" alt="">
                    <span class="share-num-wrap" v-if="shareMsg.shareNum">{{parseInt(shareMsg.shareNum) > 9999 ? '1w+' : shareMsg.shareNum}}</span>
                </span>
            </span>
        </span>
        <comment-list
                ref="commentListRef"
                v-if="showComment"
                :commentListProps="commentListProps"
                @closeComment="closeComment"
                @getSubCommentList="getSubCommentList"
                @deleteComment="deleteComment"
                @doComment="doComment"
                @isLike="isLike"
                @getUserMainComment="getUserMainComment"
        ></comment-list>
        <v-share v-if="isShare && shareMsg.isNeedContentShare" @clickFn="closeShare"></v-share>
    </div>
</template>

<script>
    export default {
        name: "ShareCollectSpeak",
        props:{
            shareCollectSpeak:{
                type:Object,
            },
            commentListProps:{
                type:Object
            },
        },
    // {
    //         shareCollectSpeak:{
    //             type:Object,
    //             default:function () {
    //                 return{}
    //             }
    //         }
    //     },
        data(){
            return{
                shareMsg:{
                    visitNum:0,
                    shareNum:0,
                    likeNum:0,
                    commentedNum:0,
                    hadLiked:0,
                    mediaId:0,
                    likeType:0,
                    isNeedContentShare:true,
                    inputText:'创造神评论...',
                    penType:1,
                },
                likeNum:null,
                hadLiked:null,
                commentedNum:0,
                isShare:false,
                showComment:false,
            }
        },
        mounted(){
           this.shareMsg = Object.assign({},this.shareMsg,this.shareCollectSpeak);
           this.likeNum = this.shareMsg.likeNum
           this.hadLiked = this.shareMsg.hadLiked
           
        },
        methods:{
            isWrapLike(boolean){
                if(!this.userId){
                    this.$router.push('/to/login');
                    return
                }
                this.$emit('isLike',{isLike:boolean,likeType:this.shareMsg.likeType,likeKey:this.shareMsg.mediaId});
                if(boolean){
                    this.likeNum++ ;
                    this.hadLiked = true;
                    
                }else{
                    this.likeNum-- ;
                    this.hadLiked = false;

                }
            },
            commentShow(){
                if(!this.userId){
                    this.$router.push('/to/login');
                    return
                }
                let that = this;
                this.$emit('getCommentList',{needLoading:true});
                this.$emit('getUserMainComment',{checkCurPage:1,mediaId:that.shareMsg.mediaId});
                this.$emit("isShowHomeTap",false);
                this.$emit("isNotAutoplay",true);
                this.showComment = true;
            },
            getUserMainComment(obj){
                this.$emit('getUserMainComment',obj);
            },
            getCommentList(obj){
                if(this.userId){
                    this.$router.push('/to/login');
                    return
                }
                this.$emit('getCommentList',obj);
            },
            sonScrollTop(){
               this.$refs.commentListRef.toScrollTop();
            },
            openSonComment(obj){
                this.$refs.commentListRef.showSonComment(obj);
            },
            getSubCommentList(obj){
                this.$emit("getSubCommentList",obj);
            },
            closeComment(){
                this.showComment = false;
                this.$emit("isShowHomeTap",true);
                this.$emit("isNotAutoplay",false);
                this.$emit('closeOther')
            },
            closeShare(){
                this.isShare = false;
            },
            showShare(){
                this.isShare = true;
                if( !this.shareMsg.isNeedContentShare ){
                    this.$emit('showShare');
                }
            },
            deleteComment(data){
                this.$emit('deleteComment',data);
            },
            doComment(commentVal){
                this.$emit('doComment',commentVal);
            },
            isLike(data){
                this.$emit('isLike',data)
            }
        },
        components:{
            "comment-list":()=>import("../../commonComponents/bottomShow/CommentList"),
            "v-share":()=>import("../../commonComponents/share/Share"),
        },
        // computed:{
        //     commentedNum(){
        //         return Object.assign({},this.shareMsg)
        //     }
        // },
        watch:{
            shareCollectSpeak:{
                handler(value,oldValue){
                    this.shareMsg = Object.assign({},this.shareMsg,value);
                },
                deep:true,
                immediate:true
            },
            commentList:function(){
            },
            shareMsg(val){
                this.commentedNum = val.commentedNum;
            }
        }

    }
</script>

<style scoped lang="scss">
    .share-collext-speak{
        display: -webkit-flex;
        display: flex;
        width: 3.41rem;
        width: 90.1vw;
        justify-content: space-between;

        /*display: -webkit-box;*/
        /*display: -ms-flexbox;*/
        /*display: flex;*/
        /*width: 100%;*/
        /*z-index: 10;*/
        /*position: absolute;*/
        /*color: #fff;*/
        /*bottom: 50px;*/
        /*-webkit-box-pack: justify;*/
        /*-ms-flex-pack: justify;*/
        /*justify-content: space-between;*/
        /*padding: 0 14px;*/
    }
    .scs-bowser-person{
        -wekbit-flex: 1;
        flex: 1;
    }
    .scs-wicon,.scs-bowser-person{
        height: .28rem;
        line-height: .28rem;
    }
    .scs-icon{
        width: .18rem;
        background: transparent;
    }
    @media screen and (max-width:374px){
        .scs-icon{
            width: 18px;
        }
    }
    .scs-bowser-person{
        font-size: .1rem;
        color: #fff;
    }
    .scs-praise{
        color: #fff;
    }
    .scs-wicon{
        display: inline-block;
        min-width: .6rem;
        font-size: .1rem;
        text-align: right;
        box-sizing: border-box;
        padding-top: 5px;
    }
    @media screen and (max-width: 374px){
        .scs-wicon{
            font-size: 12px;
        }
    }
    .share-num-wrap{
        position: relative;
        top: -.05rem;
    }
    .pen-icon{
        width: .16rem;
        position: relative;
        top: .03rem;
    }
    .pen-wicon{
        width: 1.28rem;
        height: .28rem;
        line-height: .28rem;
        -webkit-border-radius: .25rem;
        -moz-border-radius: .25rem;
        border-radius: .25rem;
        background-color: rgba(0,0,0,.2);
        text-align: center;
        font-size: .1rem;
    }   
</style>